<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>公告</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件样式" name="1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="图标">
              <div class="icon_box">
                <span class="hasIcon" v-show="data.icon != ''">
                  <i :class="data.icon + ' iconfont'"></i>
                  <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i>
                  <span class="choose_bar" @click="chooseIcon()"><i class="txt">替换</i></span>
                </span>
                <span class="noIcon" v-show="data.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('left')"></i></span>
              </div>
            </el-form-item>
            <el-form-item label="图标颜色"><ColorPicker :color="data" :name="'icon_color'"></ColorPicker></el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容" name="2">
          <el-form class="no_botom" size="medium" label-width="100px">
            <el-form-item label="公告内容">
              <el-radio-group v-model="data.type">
                <el-radio label="1">读取商城公告</el-radio>
                <el-radio label="2">手动添加</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.type == 1">
                <div class="input_div">
                  <span class="label">读取数量：</span>
                  <div class="input-with-reset">
                    <el-radio-group v-model="data.num">
                      <el-radio label="5">5条</el-radio>
                      <el-radio label="10">10条</el-radio>
                      <el-radio label="15">15条</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <draggable v-if="data.type == 2" element="div" style="padding: 10px;" v-model="data.list" :animation="200">
            <div class="container" v-for="(item, i) in data.list" :key="i">
              <i class="el-icon-error cancal" @click="dellist(i)"></i>
              <i class="el-icon-menu left"></i>
              <div class="content">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="按钮文字"><el-input type="text" placeholder="请输入内容" v-model="item.title" show-word-limit></el-input></el-form-item>

                  <el-form-item label="链接地址">
                    <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </draggable>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="3">
          <el-form size="medium" label-width="100px">
            <el-form-item label="文字颜色"><ColorPicker :color="data" :name="'text_color'"></ColorPicker></el-form-item>
            <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'bg_color'"></ColorPicker></el-form-item>

            <el-form-item label="滚动速度">
              <div class="slider_box">
                <el-slider class="slider_item" :max="10" v-model="data.interval"></el-slider>
                <el-input-number v-model="data.interval" :controls="false" :min="0" :max="10"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_t"></el-slider>
                <el-input-number v-model="data.p_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_b"></el-slider>
                <el-input-number v-model="data.p_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_lr"></el-slider>
                <el-input-number v-model="data.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_t"></el-slider>
                <el-input-number v-model="data.r_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_b"></el-slider>
                <el-input-number v-model="data.r_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from '@/components/ColorPicker/index';
import draggable from 'vuedraggable';
import Linkdiv from '@/components/Link/index';
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      acivedata: {},
      activid: 0
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    ColorPicker,
    draggable,
    Linkdiv
  },
  methods: {
    //选择图标
    chooseIcon() {
      this.$parent.showiconselcet();
    },
    geticon(data) {
      this.data.icon = data;
    },
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.linkdata = item;
    },
    dellist(i){
    	this.data.list.splice(i,1)
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}
.no_botom .el-form-item {
  margin-bottom: 0;
}
</style>
